<template>
  <div id="app">
    <el-divider content-position="left"><span style="color: #3a8ee6; font-weight: bold;">1.部件制造</span></el-divider>
    <el-form :model="manufactureForm" label-width="120px" size="mini">
      <el-form-item label="计划时间">
        <el-date-picker
            v-model="manufactureForm.value1"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="阶段文件">
            <el-upload
                action="https://jsonplaceholder.typicode.com/posts/"
                list-type="picture-card"
                :on-preview="handlePictureCardPreview"
                :on-remove="handleRemove">
              <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="dialogImageUrl" alt="">
            </el-dialog>
      </el-form-item>
    </el-form>
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="外购管理" name="first">
        <el-table
            ref="multipleTable"
            :data="tableData1"
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="handleSelectionChange"
            show-summary="true">
          <el-table-column type="selection" fixed width="80px">
          </el-table-column>
          <el-table-column
              prop="sn"
              label="序号"
              width="60">
          </el-table-column>
          <el-table-column
              prop="name"
              label="名称"
              width="120">
          </el-table-column>
          <el-table-column
              prop="brand"
              label="品牌"
              width="60">
          </el-table-column>
          <el-table-column
              prop="model"
              label="规格/型号"
              width="200">
          </el-table-column>
          <el-table-column
              prop="number"
              label="数量"
              width="60">
          </el-table-column>
          <el-table-column
              prop="supplier"
              label="供应商"
              width="100">
          </el-table-column>
          <el-table-column
              prop="price"
              label="价格"
              width="90">
          </el-table-column>
          <el-table-column
              prop="deliverytime"
              label="参考货期"
              width="90">
          </el-table-column>
          <el-table-column
              prop="unitprice"
              label="采购单价"
              width="90">
          </el-table-column>
          <el-table-column
              prop="totalprice"
              label="总价"
              width="90">
          </el-table-column>
          <el-table-column
              prop="supplier"
              label="供应商(可点击)"
              width="150">
          </el-table-column>
          <el-table-column
              prop="delivertime_true"
              label="货期"
              width="90">
          </el-table-column>
          <el-table-column
              prop="arrival"
              label="到货情况"
              width="90">
          </el-table-column>
          <el-table-column type="expand" label="展开" fixed>
            <template slot-scope="props">
              <el-form label-position="left" inline class="demo-table-expand" style="margin-left:15px">
                <el-form-item label="备注">
                  <span>{{ props.row.att }}</span>
                </el-form-item>
                <el-form-item label="历史采购信息(显示历史价格、货期以及质量问题)">
                  <span>{{ props.row.history }}</span>
                </el-form-item>
              </el-form>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="外协管理" name="second">
        <el-table
            ref="multipleTable"
            :data="tableData"
            tooltip-effect="dark"
            @selection-change="handleSelectionChange">
          <el-table-column type="selection" fixed width="80px">

          </el-table-column>
          <el-table-column
              prop="sn"
              label="序号"
              width="60">
          </el-table-column>
          <el-table-column
              prop="part"
              label="所属部件及代号"
              width="120">
          </el-table-column>
          <el-table-column sortable
                           prop="DrawingNo"
                           label="图号"
                           width="80"
          >
          </el-table-column>
          <el-table-column
              prop="name"
              label="名称"
              width="100">
          </el-table-column>
          <el-table-column
              prop="number"
              label="数量"
              width="60">
          </el-table-column>
          <el-table-column
              prop="weight"
              label="重量"
              width="80">
          </el-table-column>
          <el-table-column
              prop="metrial"
              label="材料"
              width="80">
          </el-table-column>
          <el-table-column
              prop="heat"
              label="热处理"
              width="80"
              :filters="[{text: '是', value: '是'}, {text: '否', value: '否'}]"
              :filter-method="filterHandler">
          </el-table-column>
          <el-table-column
              prop="key"
              label="重要件"
              width="80"
              :filters="[{text: '是', value: '是'}, {text: '否', value: '否'}]"
              :filter-method="filterHandler">
          </el-table-column>
          <el-table-column
              prop="Reinspection"
              label="复验"
              width="80"
              :filters="[{text: '是', value: '是'}, {text: '否', value: '否'}]"
              :filter-method="filterHandler">
          </el-table-column>
          <el-table-column
              prop="zhuangtai"
              label="状态"
              width="100px">
          </el-table-column>
          <el-table-column
              prop="time1"
              label="预计完成时间"
              width="120px">
          </el-table-column>
          <el-table-column
              prop="Reinspection"
              label="是否合格"
              width="90"
              :filters="[{text: '是', value: '是'}, {text: '否', value: '否'}]"
              :filter-method="filterHandler">
          </el-table-column>
          <el-table-column
              prop="shuoming"
              label="不合格说明"
              width="100px">
          </el-table-column>
          <el-table-column
              prop="time2"
              label="重新提交时间"
              width="120px">
          </el-table-column>
          <el-table-column
              prop="result"
              label="检验结果"
              width="100px">
          </el-table-column>
          <el-table-column type="expand" label="展开" fixed>
            <template slot-scope="props">
              <el-form label-position="left" inline class="demo-table-expand" style="margin-left:15px">

                <el-form-item label="备注">
                  <span>{{ props.row.att }}</span>
                </el-form-item>
              </el-form>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="质量管理" name="third">
        <el-table
            ref="qualityTable"
            :data="qualityTable"
            tooltip-effect="dark"
            @selection-change="handleSelectionChange">
          <el-table-column type="selection" fixed width="80px">

          </el-table-column>
          <el-table-column
              prop="sn"
              label="序号"
              width="60">
          </el-table-column>
          <el-table-column
              prop="part"
              label="工序名称"
              width="200">
          </el-table-column>
          <el-table-column
              prop="number"
              label="检验方式"
              width="100">
          </el-table-column>
          <el-table-column
              prop="metrial"
              label="问题描述"
              width="400">
          </el-table-column>
          <el-table-column
              prop="header"
              label="检验人"
              width="100px">
          </el-table-column>
          <el-table-column
              prop="result"
              label="负责人"
              width="100px">
          </el-table-column>
          <el-table-column
              prop="time2"
              label="验收人"
              width="100px">
          </el-table-column>
          <el-table-column
              prop="result"
              label="验收结果"
              width="100px">
          </el-table-column>
          <el-table-column type="expand" label="展开" fixed>
            <template slot-scope="props">
              <el-form label-position="left" inline class="demo-table-expand" style="margin-left:15px">

                <el-form-item label="备注">
                  <span>{{ props.row.att }}</span>
                </el-form-item>
              </el-form>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="本阶段财务相关信息" name="fourth"><span color="#0000aa">将从浪潮API中接入相关数据</span></el-tab-pane>
    </el-tabs>

      <el-divider content-position="left"><span style="color: #3a8ee6; font-weight: bold;">2.整机装配</span></el-divider>
      <el-form :model="manufacture2Form" label-width="120px" size="mini">
      <el-form-item label="计划时间">
        <el-date-picker
            v-model="manufactureForm.value2"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="工作内容">
        <el-input type="textarea" v-model="manufactureForm.content" clearable></el-input>
      </el-form-item>
      <el-form-item label="阶段文件">
            <el-upload
                action="https://jsonplaceholder.typicode.com/posts/"
                list-type="picture-card"
                :on-preview="handlePictureCardPreview"
                :on-remove="handleRemove">
              <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="dialogImageUrl" alt="">
            </el-dialog>
      </el-form-item>
      <el-form-item label="工作图片">
        <el-image
            style="width: 150px; height: 150px"
            :src="manufactureForm.url"
            :preview-src-list="manufactureForm.srcList">
        </el-image>
      </el-form-item>
      </el-form>
      <el-divider content-position="left"><span style="color: #3a8ee6; font-weight: bold;">3.检验</span></el-divider>
      <el-form :model="manufacture3Form" label-width="120px" size="mini">
      <el-form-item label="提交时间">
        <el-date-picker v-model="manufactureForm.value3">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="阶段文件">
            <el-upload
                action="https://jsonplaceholder.typicode.com/posts/"
                list-type="picture-card"
                :on-preview="handlePictureCardPreview"
                :on-remove="handleRemove">
              <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="dialogImageUrl" alt="">
            </el-dialog>

            <el-upload
                action="https://jsonplaceholder.typicode.com/posts/"
                list-type="picture-card"
                :on-preview="handlePictureCardPreview"
                :on-remove="handleRemove">
              <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="dialogImageUrl" alt="">
            </el-dialog>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="mini" @click="onSubmit()">提交审批</el-button>
        <el-button type="primary" size="mini">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "Manu",
  data(){
    return{
      show1:'true',
      show2:'true',
      manufactureForm: {
        value1: '',
        value2: '',
        value3:'',
        content: '',
        url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
        srcList: [
          'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
          'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'
        ]
      },
      activeName: 'first',
      tableData: [
        {
          sn: 1,
          part: '0-0',
          DrawingNo: '0-0',
          number: 1,
          name: '总装',
          weight: '3900kg',
          metrial: '不锈钢',
          heat: '是',
          key: '是',
          Reinspection: '是'
        },
        {
          sn: 2,
          part: '0-0',
          DrawingNo: '0-1',
          number: 1,
          name: '机头',
          weight: '200kg',
          metrial: '不锈钢',
          heat: '是',
          key: '是',
          Reinspection: '是'
        },
        {
          sn: 3,
          part: '0-0',
          DrawingNo: '0-2',
          number: 1,
          name: '横梁',
          weight: '1200kg',
          metrial: '铸件',
          heat: '是',
          key: '是',
          Reinspection: '否'
        },
        {
          sn: 4,
          part: '0-0',
          DrawingNo: '0-3',
          number: 1,
          name: '工作台',
          weight: '1200kg',
          metrial: '铸件',
          heat: '否',
          key: '是',
          Reinspection: '是'
        },
        {
          sn: 5,
          part: '0-0',
          DrawingNo: '0-4',
          number: 3,
          name: '滑轨',
          weight: '100kg',
          metrial: '不锈钢',
          heat: '是',
          key: '否',
          Reinspection: '是'
        }
      ],
      tableData1: [
        {
          sn: 1,
          name: 'X向拖链',
          brand: '盛昊',
          model: 'KF55X75 R100 L1150',
          number: '1',
          supplier: '沧州盛昊',
          price: '190',
          deliverytime: '20天',
          unitprice: '186',
          totalprice: '186',
          delivertime_true: "15天",
          arrival: "未到货"
        },
        {
          sn: 2,
          name: 'Y向拖链',
          brand: '盛昊',
          model: 'KF55X60 R100 L970',
          number: '1',
          supplier: '沧州盛昊',
          price: '160',
          deliverytime: '20天',
          unitprice: '155',
          totalprice: '155',
          delivertime_true: "15天",
          arrival: "未到货"
        },
        {
          sn: 3,
          name: 'Z向拖链',
          brand: '盛昊',
          model: 'KF55X60 R100 L1325',
          number: '1',
          supplier: '沧州盛昊',
          price: '220',
          deliverytime: '20天',
          unitprice: '212',
          totalprice: '212',
          delivertime_true: "15天",
          arrival: "未到货"
        },
        {
          sn: 4,
          name: '风琴机床防护罩',
          brand: '定制',
          model: 'X向（含两侧护板），宽度不超出底座边缘',
          number: '1',
          supplier: '沧州盛昊',
          price: '1300',
          deliverytime: '20天',
          unitprice: '1240',
          totalprice: '1240',
          delivertime_true: "15天",
          arrival: "未到货"
        },
        {
          sn: 5,
          name: '风琴机床防护罩',
          brand: '定制',
          model: 'Y向（含导轨和丝杠）导轨丝杠分开定做',
          number: '1',
          supplier: '沧州盛昊',
          price: '450',
          deliverytime: '20天',
          unitprice: '420',
          totalprice: '420',
          delivertime_true: "15天",
          arrival: "未到货"
        },
        {
          sn: 6,
          name: '风琴机床防护罩',
          brand: '定制',
          model: 'Z向（Z下集成接油槽，增加观察油镜）按新模型定做',
          number: '1',
          supplier: '沧州盛昊',
          price: '700',
          deliverytime: '20天',
          unitprice: '650',
          totalprice: '650',
          delivertime_true: "15天",
          arrival: "未到货"
        },
        {
          sn: 7,
          name: '垫铁',
          brand: '定制',
          model: '三层100mm厚',
          number: '10',
          supplier: '沧州盛昊',
          price: '180',
          deliverytime: '20天',
          unitprice: '175',
          totalprice: '175',
          delivertime_true: "15天",
          arrival: "未到货"
        }],
      qualityTable:[],
    }
  },
  methods: {
    onSubmit() {
      location = "";
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    handleSelectionChange(val){
      this.multipleSelection = val;
    }
  }
}
</script>

<style scoped>
.el-divider {
  margin: 35px auto;
}

.el-divider span {
  font-size: 17px;
  font-weight: 100;
  color: #000;
}
</style>